import React, { Component } from 'react'
import Breadcrumb from '../../base/Breadcrumb'
import { withRouter } from 'react-router-dom'
import { Button, Message, Checkbox } from 'element-react'
import '../goods.css'
class GoodsFormatList extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      name: sessionStorage.productName,
      createTime: "",
      id: 0,
      keyStatus: 0,
      productId: 0,
      updateTime: "",
      value: "",
      list: [],
      allChoose: false
    }
    this.skuArray = []
  }
  componentDidMount() {
    this.setState({productId: this.props.match.params.id})
    this.init()
  }
  init () {
    // let productId
    this.$ajax.selectProductSpec(this.props.match.params.id).then(res => {
      if (res.code === 200) {
        res.data.map((a, index) => {
          a.valueArr = []
          a.checked = false
          a.values.map((item, i) => {
            a.name += item.name
            a.valueArr.push(item.value)
          })
          return a
        })
        this.setState({list: res.data})
        // this.setState({list: res.data, createTime: res.data.createTime, id: res.data.id, keyStatus: res.data.keyStatus, productId: res.data.productId, updateTime: res.data.updateTime, value: res.data.value})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  increase () {
    this.props.history.push(
      {
        pathname: '/goodsFormatCreate',
        state: { fromDashboard: true }
      }
    )
    window.sessionStorage.setItem('productId', this.state.productId)
  }
  edit (item) {
    // let productId = item.productId
    this.props.history.push(
      {
        pathname: `/goodsFormatOperate/${this.state.productId}`,
        state: { fromDashboard: true }
      }
    )
    window.sessionStorage.setItem('productItem', JSON.stringify(item))
  }
  allChoose (val) {
    if (val) {
      let list = this.state.list.map((a) => {
        a.checked = true
        return a
      })
      this.setState({list, allChoose: true})
    } else {
      let list = this.state.list.map((a) => {
        a.checked = false
        return a
      })
      this.setState({list, allChoose: false})
    }
  }
  goSku () {
    this.state.list.map(a => {
      if (a.checked) {
        this.skuArray.push(a)
      }
    })
    if (this.skuArray.length === 0) {
      Message('请勾选相关参数')
      return
    }
    sessionStorage.skuArr = JSON.stringify(this.skuArray)
    this.props.history.push(
      {
        pathname: `/skuCreated/${this.state.productId}`,
        state: { fromDashboard: true }
      }
    )
  }
  itemChoose (index, value) {
    if (value) {
      this.state.list[index].checked = true
      this.setState({list: this.state.list})
    } else {
      this.state.list[index].checked = false
      this.setState({list: this.state.list})
    }
  }
  render() {
    return (
      <div className="goodsFormatList">
        <Breadcrumb data={['商品管理', '商品规格']}/>
        <div className="title">产品名称：<span>{this.state.name}</span>
        </div>
        <div><button type="button" className="btn btn-increase" onClick={this.increase.bind(this)}>新增规格</button></div>
        <table className="table">
          <tbody>
            <tr>
              <th><Checkbox onChange={this.allChoose.bind(this)} checked={this.state.allChoose}></Checkbox>全选</th>
              <th>参数名称</th>
              <th>参数值</th>
              <th>操作</th>
            </tr>
            {
              this.state.list.map((a, index) => {
                return (
                  <tr key={index}>
                    <td><Checkbox checked={a.checked} onChange={this.itemChoose.bind(this, index)}></Checkbox></td>
                    <td>{a.value}</td>
                    <td>{a.valueArr.join('/')}</td>
                    <td><Button type="success" size="small" onClick={this.edit.bind(this, a)}>编辑</Button></td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
        <div className="height20"></div>
        <Button type="primary" size="large" onClick={this.goSku.bind(this)}>sku生成</Button>
      </div>
    )
  }
}

export default withRouter(GoodsFormatList)
